<template>
  <!-- <dt-info-edit-text v-if="option.text"
    :value="(val!==null||val!==undefined||val!=='')?val:option.placeholder"
    :option="option.text" /> -->
  <dt-info-edit-text v-if="option.text" :value="val || option.placeholder" :option="option.text" />
  <div v-else-if="option.input && option.input.type == 'number'">
    <div style="display: flex">
      <InputNumber
        :precision="option.input.precision"
        :value="val != null ? Number(val) : null"
        :min="option.input.min"
        :max="option.input.max"
        :active-change="false"
        :step="0.01"
        :formatter="(value) => (option.input.formatter ? option.input.formatter(value) : value)"
        :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
        :placeholder="option.placeholder"
        :disabled="option.disabled"
        @input="onChange"
        :style="option.input.error ? 'border-color: #ed4014;' : ''"
        style="flex: 1"
        @on-focus="option.input.focus ? option.input.focus(val, option) : func"
        @on-blur="option.input.blur ? option.input.blur(val, option) : func" />
      <div v-if="option.input.unit">{{ option.input.unit }}</div>
    </div>

    <div class="tips" v-html="option.tips"></div>
  </div>
  <div v-else-if="option.input">
    <Input
      :clearable="option.input.clearable"
      :value="val"
      :maxlength="option.input.maxlength"
      :prefix="option.input.prefix"
      :type="option.input.type"
      :autosize="option.input.autosize"
      :placeholder="option.placeholder"
      :show-word-limit="option.input.showWordLimit"
      :disabled="option.disabled"
      @input="onChange"
      @on-focus="option.input.focus ? option.input.focus(val, option) : func"
      @on-blur="option.input.blur ? option.input.blur(val, option) : func"
      @on-change="option.input.change ? option.input.change(val, option) : func">
      <span slot="prepend" v-if="option.input.prependTxt">
        {{ option.input.prependTxt }}
      </span>
      <span slot="append" v-if="option.input.appendTxt">
        {{ option.input.appendTxt }}
      </span>
    </Input>
    <div class="tips" :style="{ color: option.tipsColor }" v-html="option.tips"></div>
  </div>
  <div v-else-if="option.date">
    <DatePicker
      ref="date"
      :clearable="option.date.clearable"
      :value="val"
      :type="option.date.type"
      :placeholder="option.placeholder"
      :options="{ disabledDate: option.date.disabled }"
      :disabled="option.disabled"
      :format="option.date.format"
      @on-change="onChange"
      :transfer="option.date.transfer != null ? option.date.transfer : false"
      split-panels />
    <div class="tips" v-html="option.tips"></div>
  </div>
  <div v-else-if="option.select">
    <Select
      ref="select"
      label-in-value
      :transfer="option.select.transfer != null ? option.select.transfer : true"
      :value="toString(val)"
      :multiple="option.select.multiple"
      :clearable="option.select.clearable"
      :placeholder="option.placeholder"
      @on-change="onChange"
      :remote-method="option.select.remote ? onRemote : null"
      :on-query-change="option.select.query"
      :disabled="option.disabled"
      :filterable="option.select.filterable"
      :loading="option.select.loading"
      :max-tag-count="option.select.maxTagCount">
      <Option
        v-for="item in option.select.options || $dt.dictInfo()[option.select.key]"
        :key="item.key"
        :value="toString(item.key)"
        :label="item.value"
        :disabled="item.disabled" />
    </Select>
    <div class="tips" v-html="option.tips"></div>
  </div>
  <div v-else-if="option.radio">
    <RadioGroup :value="val" @on-change="onChange">
      <Radio
        v-for="item in option.radio.options"
        :key="item.key"
        :label="item.key"
        :disabled="item.disabled || option.disabled">
        {{ item.value }}
      </Radio>
    </RadioGroup>
    <div class="tips" :style="{ color: option.tipsColor }" v-html="option.tips"></div>
  </div>

  <CheckboxGroup v-else-if="option.checkbox" :value="val || []" @on-change="onChange">
    <Checkbox
      v-for="item in option.checkbox.options"
      :label="item.key"
      :key="item.key"
      :disabled="item.disabled || option.disabled">
      <span style="marginleft: 5px">{{ item.value }}</span>
    </Checkbox>
  </CheckboxGroup>

  <Button
    v-else-if="option.button"
    :type="option.button.type"
    :disabled="option.disabled"
    :ghost="option.button.ghost || false"
    @click="option.button.click">
    <span :style="option.button.style">{{ option.button.title }}</span>
    <div v-if="option.button.tips" style="margin-top: 40px; color: #ccc !important">
      {{ option.button.tips }}
    </div>
  </Button>

  <div v-else-if="option.tag">
    <template v-if="option.tag.type == 'text'">
      <span
        v-for="tag in option.tag.options"
        :key="tag.key"
        @click="option.tag.click ? option.tag.click(tag) : func"
        style="
          cursor: pointer;
          color: #3366ff;
          text-decoration: underline;
          margin-right: 16px;
          display: inline-block;
        "
        :style="option.tag.style">
        {{ tag.value }}
      </span>
    </template>
    <template v-else>
      <Tag
        v-for="tag in option.tag.options"
        :key="tag.key"
        :closable="option.tag.closable"
        :on-close="option.tag.close"
        @click.native="option.tag.click ? option.tag.click(tag) : func"
        :color="option.tag.color"
        style="cursor: pointer">
        {{ tag.value }}
      </Tag>
    </template>
    <div v-if="!option.tag.options || !option.tag.options.length">{{ option.placeholder ?? '-' }}</div>
  </div>

  <div v-else-if="option.uploadImg" class="upload_img">
    <div class="upload_img_line">
      <Upload
        ref="uploadImg"
        v-show="info[option.key].length < option.uploadImg.maxlength"
        :format="option.uploadImg.format"
        :disabled="option.disabled || (!!option.uploadImg.percent && option.uploadImg.percent < 100)"
        :on-format-error="onFormatError"
        :action="option.uploadImg.api.reqUrl"
        :name="option.uploadImg.api.data.fileName"
        :multiple="option.uploadImg.multiple"
        :headers="option.uploadImg.api.headers"
        :data="option.uploadImg.api.data"
        :default-file-list="option.uploadImg.files"
        :max-size="option.uploadImg.maxSize"
        :accept="option.uploadImg.accept"
        :on-success="onUploadSuccess"
        :on-remove="onUploadRemove"
        :on-preview="onUploadPreview"
        :on-error="onUploadError"
        :show-upload-list="option.uploadImg.show"
        :before-upload="onUploadBefore">
        <div
          style="
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px dashed #dadada;
            cursor: pointer;
            margin-right: 10px;
          ">
          <Icon
            v-if="!option.uploadImg.percent || option.uploadImg.percent == 100"
            type="ios-add"
            :size="30" />
          <i-circle v-else :percent="option.uploadImg.percent" :size="70" style="margin-top: 13px">
            <span style="font-size: 18px">{{ option.uploadImg.percent }}%</span>
          </i-circle>
        </div>
      </Upload>

      <div class="list_img_warp">
        <div
          v-for="(item, index) in info[option.key]"
          :key="index"
          class="list_img"
          @dragstart="dragstart(index)"
          @dragenter="dragenter($event, index, info[option.key])"
          @dragover="dragover($event, index)"
          :draggable="option.uploadImg.drag ? true : false">
          <div v-if="item.url.indexOf('.html') < 0" class="demo_upload_list">
            <img
              style="object-fit: cover"
              :src="
                item.url.indexOf('.mp4') > 0
                  ? item.url + '?x-oss-process=video/snapshot,t_0,m_fast'
                  : item.url + '?x-oss-process=image/resize,w_350'
              " />
            <div class="demo_upload_list_cover">
              <Icon type="ios-eye-outline" @click.native="preViewImgFun(info[option.key], index)"></Icon>
              <Icon
                type="ios-trash-outline"
                v-if="!option.uploadImg.hideDel"
                @click.native="preViewImgRemove(info[option.key], index)"></Icon>
            </div>
          </div>
          <div v-else>
            <div>
              {{
                item.name ?? item.url?.split('name=')[1] ?? item.url?.split('hid=')[1]?.split('&domain')[0]
              }}
            </div>
            <div style="display: flex">
              <a
                @click="preViewImgRemove(info[option.key], index)"
                v-if="!option.uploadImg.hideDel"
                style="margin-right: 10px; color: red">
                删除
              </a>
              <a @click="preViewImgFun(info[option.key], index)" style="margin-right: 10px">预览</a>
              <a
                v-clipboard:copy="item.url"
                style="margin-right: 10px"
                @click="
                  () => {
                    $Message.success('内容已复制到剪切板！')
                  }
                ">
                复制链接
              </a>
            </div>
          </div>
          <div class="list-cover-marker" v-if="option.uploadImg.hasCover">
            <Radio
              class="editBtn"
              v-model="item.cover"
              true-value="1"
              false-value="2"
              @on-change="handleSetCover(info[option.key], index)"
              :disabled="option.uploadImg.hideDel">
              {{ item.cover == 1 ? option.uploadImg.trueRadioTxt : option.uploadImg.falseRadioTxt }}
            </Radio>
          </div>
          <preview-image
            :images="preViewImg"
            :showDownLoad="option.uploadImg.showDownLoad"
            :showIndex="showIndex"
            ref="preViewImage"></preview-image>
        </div>
      </div>
    </div>
    <template v-if="option.placeholder">
      <div style="color: #bebebe" v-for="txt in option.placeholder.split('\n')">
        {{ txt }}
      </div>
    </template>
  </div>

  <div v-else-if="option.upload">
    <Upload
      ref="upload"
      v-show="
        !option.upload.maxlength ||
        (option.upload.maxlength && info[option.key].length < option.upload.maxlength)
      "
      :format="option.upload.format"
      :disabled="option.disabled"
      :on-format-error="onFormatError"
      :action="option.upload.api.reqUrl"
      :name="option.upload.api.data.fileName"
      :multiple="option.upload.multiple"
      :headers="option.upload.api.headers"
      :data="option.upload.api.data"
      :default-file-list="option.upload.files"
      :max-size="option.upload.maxSize"
      :accept="option.upload.accept"
      :on-success="onUploadSuccess"
      :on-remove="onUploadRemove"
      :on-preview="onUploadPreview"
      :show-upload-list="option.upload.show"
      :before-upload="onUploadBefore">
      <!-- <Button>{{ option.upload.title }}</Button> -->
      <Button :disabled="option.upload.disabled">
        {{ option.upload.title }}
      </Button>
      <div style="color: #bebebe">
        {{ option.placeholder || option.upload.placeholder }}
      </div>
    </Upload>
    <div v-if="option.upload.showDel" style="max-height: 200px; overflow-y: scroll">
      <div v-for="(item, index) in info[option.key]" :key="index" style="display: flex">
        <p>{{ item.name || item.accessoryName || item.imageName }}</p>
        <Button type="text" style="color: #2d8cf0" @click="removeFileFun(info[option.key], index)">
          删除
        </Button>
      </div>
    </div>
  </div>

  <Cascader
    v-else-if="option.cascader"
    :value="val || []"
    :data="option.cascader.options"
    :disabled="option.disabled"
    :trigger="option.cascader.trigger"
    :transfer="option.cascader.transfer != null ? option.cascader.transfer : true"
    :clearable="option.cascader.clearable"
    :placeholder="option.placeholder"
    :filterable="option.cascader.filterable"
    :load-data="option.cascader.loadData"
    :change-on-select="option.cascader.changeOnSelect || false"
    @on-change="onChange"></Cascader>

  <div v-else-if="option.switch">
    <i-switch
      :value="val"
      :true-color="option.switch.trueColor"
      :before-change="option.switch.before"
      :disabled="option.disabled"
      :size="option.switch.size"
      :false-color="option.switch.falseColor"
      @on-change="onChange">
      <span slot="open">{{ option.switch.openText }}</span>
      <span slot="close">{{ option.switch.closeText }}</span>
    </i-switch>
    <div class="tips" :class="option.tipsIsBlock" v-html="option.tips"></div>
  </div>

  <tree-select
    ref="tree"
    v-else-if="option.tree"
    :value="val"
    :treeList="option.tree.options"
    :disabled="option.tree.disabled"
    @input="onChange"
    :selectPlaceholder="option.tree.selectPlaceholder"
    :searchFun="option.tree.searchFun"
    :maxTagCount="option.tree.maxTagCount"
    :searchBtn="option.tree.searchBtn"
    :saveParent="option.tree.saveParent"
    :saveAll="option.tree.saveAll" />

  <dt-time
    ref="dtTime"
    v-else-if="option.dtTime"
    :value="val"
    @input="onChange"
    :transfer="option.dtTime.transfer"
    :clearable="option.dtTime.clearable"
    :dateType="option.dtTime.dateType"
    :dateFormat="option.dtTime.dateFormat"
    :minimumDate="option.dtTime.minimumDate" />

  <div v-else-if="option.radioNine" class="radioNine">
    <RadioGroup :value="val" @on-change="onChange" type="button">
      <Radio
        v-for="item in option.radioNine.options"
        :key="item.key"
        :label="item.key"
        :disabled="item.disabled || option.disabled">
        <span
          :title="item.value"
          style="
            display: inline-block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          ">
          {{ item.value }}
        </span>
        <span v-if="item.isTakeLook == '1'" class="qu">渠</span>
        <span v-if="item.isNetAcquire == '1'" class="wang">网</span>
      </Radio>
    </RadioGroup>
  </div>

  <div v-else-if="option.checkboxNine" class="checkboxNine">
    <CheckboxGroup :value="val || []" @on-change="onChange">
      <Checkbox
        v-for="item in option.checkboxNine.options"
        :label="item.key"
        :key="item.key"
        :disabled="item.disabled || option.disabled">
        <span style="marginleft: 5px">{{ item.value }}</span>
      </Checkbox>
    </CheckboxGroup>
  </div>

  <dt-editor
    v-else-if="option.editor"
    :value="val"
    @input="onChange"
    :type="option.editor.type"
    :maxLength="maxLength"
    :height="option.editor.height || 250" />
</template>

<script>
  import treeSelect from '@/components/tree_select.vue'
  import dtTime from '@/components/dt-time.vue'
  import toolMgr from '@/biz/base/tool.js'
  export default {
    components: {
      treeSelect,
      dtTime
    },
    props: {
      option: Object,
      info: Object
    },
    data() {
      return {
        val: null,
        showIndex: 0,
        preViewImg: [],
        dragIndex: null,
        timeout: null
      }
    },
    mounted() {
      if (this.option.load) {
        this.option.load(this.option)
      }
      this.update(true)
    },
    watch: {
      option: {
        handler(n, o) {
          if (n.load && n.load != o.load) {
            n.load(n)
          }
        },
        deep: true
      },
      info: {
        handler(n) {
          this.update()
        },
        deep: true
      }
    },
    methods: {
      func() {},
      update(flag = false) {
        if (this.info) {
          if (this.option.data && this.option.data.from) {
            let val = this.option.data.from(this.info)
            if (this.option.select && this.option.select.remote && this.val != val) {
              console.log(this.option.isBuild, this.info.housesName)
              this.onRemote(this.option.isBuild ? this.info.housesName : this.info[this.option.key])
            }
            this.val = val
          } else {
            if (
              this.option.select &&
              this.info[this.option.key] &&
              !Array.isArray(this.info[this.option.key]) &&
              !this.option.select.multiple
            ) {
              this.info[this.option.key] = String(this.info[this.option.key])
            }
            this.val = this.info[this.option.key]
          }
          if (((this.val && !Array.isArray(this.val)) || this.val?.length) && this.option.key)
            this.$emit('clearValidate', this.option.key)
          if (
            flag &&
            ((this.option.date && this.option.date.type == 'daterange') || this.option.dtTime) &&
            this.val
          ) {
            this.onChange(this.val)
          }
        }
      },
      clear() {
        this.val = null
        if (this.option.select) {
          this.$refs.select.clearSingleSelect()
        }
        if (this.option.date) {
          this.$refs.date.handleClear()
        }
        if (this.option.tree) {
          this.$refs.tree.resetTreeVal()
        }
      },
      text() {
        let txt = this.val || this.option.placeholder || ''
        if (this.option.text) {
          if (this.option.text.type == 'number') {
            txt = txt.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          }
          if (this.option.text.unit) {
            txt += this.option.text.unit
          }
        }
        return txt
      },
      toString(val) {
        let data = null
        if (Array.isArray(val)) {
          data = val.map((i) => (typeof i === 'number' || typeof i === 'boolean' ? String(i) : i))
        } else if (typeof val === 'number' || typeof val === 'boolean') {
          data = String(val)
        } else {
          data = val
        }
        return data
      },
      onChange(val, data) {
        // val 结果数据 data 较全的数据
        let value = val
        // 编辑数据（数据较全）
        let editValue = this.option.cascader || this.option.tree ? data : val
        // 处理日期
        if (
          (this.option.date && this.option.date.type == 'daterange') ||
          (this.option.dtTime && !this.option.dtTime.dateType)
        ) {
          editValue = this.$dt.tool.handleDateRange(editValue)
        }
        // 处理选择框
        if (editValue && (this.option.select || this.option.cascader)) {
          if (Array.isArray(editValue)) {
            value = editValue.map((item) => {
              return item.value
            })
          } else {
            value = editValue.value
          }
        }
        let toData = {}
        if (this.info) {
          if (this.option.data && this.option.data.to) {
            let opt = null
            if (this.option.select) {
              opt = {}
              let options = this.option.select.options || this.$dt.dictInfo()[this.option.select.key]
              options.some((item) => {
                if (val && item.key == val.value) {
                  opt = item
                  return true
                }
                return false
              })
            }
            toData = this.option.data.to(editValue, opt)
          } else {
            toData[this.option.key] = value
          }
          Object.keys(toData).forEach((key) => {
            this.info[key] = toData[key]
          })
        }
        let change = {
          editValue,
          toData,
          value,
          option: this.option,
          info: this.info
        }
        this.$emit('change', change)
        if (this.option.change) {
          this.option.change(change)
        }
      },
      onUploadSuccess(res, file, list, fileList) {
        this.onChange(list)
        if (res.code != '200') {
          this.$Message.destroy()
          this.$Message.error(res.msg || '上传失败，请重新上传')
        } else {
          setTimeout(() => {
            this.$Message.destroy()
          }, 1000)
        }
      },
      onUploadBefore(file) {
        console.log(file, '44444')

        let opt = this.option.upload || this.option.uploadImg
        let maxSize = opt.maxSize || 20480
        if (file.size / 1024 > maxSize) {
          let tip =
            maxSize >= 1048576
              ? `${Math.floor((maxSize / 1048576) * 10) / 10}G`
              : `${Math.round(maxSize / 1024)}M`
          this.$Message.error(`文件大小不能超过${tip}`)
          return false
        }
        if (
          this.option.upload &&
          this.option.upload.maxlength &&
          this.$refs.upload.fileList.length >= this.option.upload.maxlength
        ) {
          this.$Message.error('文件超多最大限制上传个数')
          return false
        }
        if (opt.checkFilesLength) {
          this.$refs.uploadImg.fileList = []
        }
        if (
          this.option.uploadImg &&
          this.option.uploadImg.maxlength &&
          this.$refs.uploadImg.fileList.length >= this.option.uploadImg.maxlength
        ) {
          this.$Message.error('图片超多最大限制上传个数')
          return false
        }
        if (opt.before) {
          if (opt.format) {
            let tmp = file.name.split('.')
            let ext = tmp[tmp.length - 1]
            if (opt.format.indexOf(ext) < 0) {
              this.onFormatError()
              return false
            }
          }
          return opt.before(file)
        }
        this.$Message.loading({
          content: '上传中',
          duration: 0
        })

        return true
      },
      onUploadError(error, file, list, fileList) {
        this.$Message.destroy()
        this.$Message.error(error.message || '上传失败，请重新上传')
      },
      onFormatError() {
        this.$Message.destroy()
        let opt = this.option.upload || this.option.uploadImg
        if (opt.formatErr) {
          opt.formatErr()
        } else {
          this.$Message.error('只支持上传格式: ' + opt.format.join(' '))
        }
      },
      onUploadRemove(file, list) {
        this.onChange(list)
      },
      onUploadPreview(file) {
        let opt = this.option.upload || this.option.uploadImg
        if (opt.preview) {
          if (file?.response?.code == 200) {
            file.url = file.response.data.imageURL
          }
          opt.preview(file)
        } else {
          toolMgr.downloadFile(file.url, file.name)
        }
      },
      onRemote(key) {
        console.log(key)
        if (this.option.select.remote) {
          this.option.select.remote(key).then((options) => {
            this.option.select.options = options
            this.$forceUpdate()
          })
        }
      },
      post(file) {
        this.$refs.upload.post(file)
      },
      removeFileFun(list, index) {
        this.$Modal.confirm({
          title: '确认删除此附件？',
          onOk: () => {
            this.$refs.upload.fileList.splice(index, 1)
            list.splice(index, 1)
            this.onChange(this.$refs.upload.fileList)
          }
        })
      },
      preViewImgFun(images, index) {
        this.preViewImg = images.map((item) => item.url)
        if (images[index].url.indexOf('.html') >= 0) {
          window.open(images[index].url)
        } else {
          this.showIndex = index
          this.$refs.preViewImage[0].show()
        }
      },
      preViewImgRemove(images, index) {
        let isVideo = this.option.uploadImg?.type == 'video'
        this.$Modal.confirm({
          title: `确认删除此${isVideo ? '视频' : '图片'}附件？`,
          onOk: () => {
            this.$refs.uploadImg.fileList.splice(index, 1)
            images.splice(index, 1)
            this.onChange(this.$refs.uploadImg.fileList)
          }
        })
      },
      handleSetCover(images, index) {
        images.forEach((item, indexL) => {
          item.cover = '2'
          if (indexL == index) {
            item.cover = '1'
          }
        })
      },
      dragstart(index) {
        this.dragIndex = index
      },

      // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
      dragenter(e, index, filelist) {
        e.preventDefault()
        this.enterIndex = index
        if (this.timeout !== null) {
          clearTimeout(this.timeout)
        }
        // 拖拽事件的防抖
        this.timeout = setTimeout(() => {
          if (this.dragIndex !== index) {
            const source = filelist[this.dragIndex]
            filelist.splice(this.dragIndex, 1)
            this.$refs.uploadImg.fileList.splice(this.dragIndex, 1)
            filelist.splice(index, 0, source)
            this.$refs.uploadImg.fileList.splice(index, 0, source)
            this.onChange(filelist)
            this.dragIndex = index
          }
        }, 100)
      },
      dragover(e, index) {
        e.preventDefault()
      }
    }
  }
</script>

<style>
  .ivu-input-number,
  .ivu-date-picker {
    width: 100%;
  }

  .list_img_warp {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .upload_img {
    display: flex;
    flex-direction: column;
  }

  .upload_img_line {
    display: flex;
    flex-direction: row;
  }

  .demo_upload_list {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */
    margin-right: 4px;
  }

  .list_img {
    display: inline-block;
  }

  .list-cover-marker {
    line-height: 30px;
    height: 30px;
  }

  .demo_upload_list img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .demo_upload_list_cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo_upload_list:hover .demo_upload_list_cover {
    display: block;
  }

  .demo_upload_list_cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .ivu-input-number-input[disabled],
  .ivu-input[disabled] {
    color: #333;
  }

  .radioNine {
    padding: 5px;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    height: 300px;
    overflow-y: auto;
  }

  .radioNine label {
    width: 25%;
    text-align: center;
    line-height: 30px !important;
    height: 30px !important;
    position: relative;
  }

  .radioNine label span.qu {
    position: absolute;
    top: -8px;
    right: 0;
    color: #ff9900;
  }
  .radioNine label span.wang {
    position: absolute;
    top: -8px;
    right: 0;
    color: #ed4014;
  }
  .radioNine .ivu-radio-group-button .ivu-radio-wrapper-checked {
    border-color: #2d8cf0;
    background-color: #2d8cf0;
    box-shadow: -1px 0 0 0 #2d8cf0;
    color: #fff;
  }

  /* .ivu-radio-group-button .ivu-radio-wrapper-disabled.ivu-radio-wrapper-checked {
    border-color: #2d8cf0;
    background-color: #2d8cf0;

    box-shadow: -1px 0 0 0 #2d8cf0;
  } */

  .tips span {
    color: red;
  }

  .Dblock {
    display: block;
  }

  .Dinline {
    display: inline-block;
    margin-left: 10px;
  }

  .checkboxNine {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
  }

  .checkboxNine > div {
    width: 80%;
    margin: 0 auto;
  }

  .checkboxNine label {
    width: 33%;
    text-align: center;
    line-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dcdee2;
  }

  .checkboxNine .ivu-checkbox-wrapper-disabled {
    border-color: #dcdee2;
    background-color: #f7f7f7;
    cursor: not-allowed;
    color: #ccc;
  }

  .checkboxNine .ivu-checkbox-wrapper-checked {
    border-color: #2d8cf0;
    background-color: #2d8cf0;
    box-shadow: -1px 0 0 0 #2d8cf0;
    color: #fff;
  }

  .checkboxNine .ivu-checkbox {
    display: none;
  }

  .ivu-radio-group-button .ivu-radio-wrapper-disabled.ivu-radio-wrapper-checked {
    border-color: #2d8cf0;
    background-color: #2d8cf0;
    box-shadow: -1px 0 0 0 #2d8cf0;
  }
</style>
